<template>
  <div class="container-item-tags">
    <div v-for="(temp_1,index_1) in tag_1" :key="index_1" class="item-tag-1">
      <div class="item-tag-base item-tag-name-1">{{ temp_1.name }}</div>
      <itemTag2 :tag-id="temp_1.id" />
    </div>
    <div class="item-tag-base item-add-tag-btn el-icon-plus" @click="addTag_1" />
  </div>
</template>

<script>
// api
import { getTag_1, createTag_1 } from '@/api/miva';
// item
import itemTag2 from './item-tag-2';
export default {
  components: { itemTag2 },
  props: {
    type: {
      type: [String, Number],
      default: 1
    }
  },
  data() {
    return {
      tag_1: []
    };
  },
  async mounted() {
    await this.getTag_1();
  },
  methods: {
    //   获取一级标签
    async getTag_1() {
      const res = await getTag_1({ project_type_id: this.type });
      const arr = [];
      for (const val of res.data) {
        arr.push({ id: val.id, name: val.tag_1_name });
      }
      this.tag_1 = arr;
    },
    //   添加一级标签
    async addTag_1() {
      this.$prompt('请输入新的一级标签', '添加新标签', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async({ value }) => {
          if (value) {
            await createTag_1({ project_type_id: this.type, tag_1_name: value });
            await this.getTag_1();
          }
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.container-item-tags {
  margin-bottom: 50px;
  .item {
    &-tag-1 {
      padding: 5px 0;
      display: flex;
    }
    &-add-tag-btn {
      border: 1px dashed #888;
      font-weight: bold;
    }
    &-tag-base {
      width: 90px;
      min-width: 90px;
      height: 21px;
      line-height: 21px;
      display: inline-block;
      border-radius: 30px;
      font-size: 12px;
      text-align: center;
      cursor: pointer;
    }
    &-tag-name-1 {
      background-color: #f45050;
      color: #fff;
    }
  }
}
</style>
